<template>
    <view class="register-container">
        <navigation-header title="注册账号" show-back="true"></navigation-header>
        <view class="register-body-container">
            <view class="register-step-container">
                <register-step step-number="1" step-text="注册" :enable="true"></register-step>
                <image src="@/static/img/register/step.png" class="step"></image>
                <register-step step-number="2" step-text="实名认证" :enable="false"></register-step>
                <image src="@/static/img/register/step.png" class="step"></image>
                <register-step step-number="3" step-text="资料审核" :enable="false"></register-step>
            </view>
            <view class="register-info-container">
                <mobile-input v-model:mobile="mobile"></mobile-input>
                <divider></divider>
                <sms-code-input v-model:smsCode="smsCode"></sms-code-input>
                <divider></divider>
                <image-code-input v-model:imageCode="imageCode" v-model:imageBase64="imageBase64"></image-code-input>
                <divider></divider>
                <password-input v-model:password="password"></password-input>
                <divider></divider>
                <password-input v-model:password="confirmPassword" placeholder="确认新密码"></password-input>
                <divider></divider>
                <button @click="nextStep">下一步</button>
            </view>
        </view>
        <toast message="接口异常,请联系管理员" v-model:show="showToast"></toast>
    </view>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { getVerificationCode } from '@/api/common/api.js';
import { onLoad } from '@dcloudio/uni-app';
import NavigationHeader from '@/components/NavigationHeader.vue';
import MobileInput from '@/components/MobileInput.vue';
import SmsCodeInput from '@/components/SmsCodeInput.vue';
import ImageCodeInput from '@/components/ImageCodeInput.vue';
import RegisterStep from '@/components/RegisterStep.vue';
import Toast from '@/components/Toast.vue';
import Divider from '@/components/Divider.vue';
import PasswordInput from '@/components/PasswordInput.vue';
const mobile = ref('');
const smsCode = ref('');
const imageCode = ref('');
const imageBase64 = ref('');
const password = ref('');
const confirmPassword = ref('');
async function getImageCode() {
    try {
        imageBase64.value = await getVerificationCode();
    } catch (error) {
        showToastText.value = error.message;
    }
}
const showToastText = ref('');
const showToast = ref(false);
function nextStep() {
    uni.navigateTo({
        url: '/pages/login/registerStep2'
    });
}
watch(showToastText, (newValue) => {
    showToast.value = true;
});
onLoad(() => {
    getImageCode();
});
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.register-container {
    @extend .column-container-layout;
    .register-body-container {
        @extend .column-container-layout;
        justify-content: center;
        align-items: center;
        padding: $scale * 20rpx;
        .register-step-container {
            @extend .row-layout;
            justify-content: space-evenly;
            margin: $scale * 20rpx 0;
            align-items: center;
            .step {
                width: $scale * 55rpx;
                height: $scale * 6rpx;
                align-self: flex-start;
                margin: $scale * 10rpx 0;
            }
        }
        .register-info-container {
            @extend .column-container-layout;
            margin: $scale * 100rpx 0;
            button {
                color: white;
                background-color: #437eff;
                border-radius: $scale * 8rpx;
                width: 100%;
                font-size: $scale * 18rpx;
                margin: $scale * 50rpx 0;
            }
        }
    }
}
</style>
